<template>
  <div class="wine-list-f">
    <div class="wine-list-all">
      <div class="wine-list-item" v-for="(wineItem, index) of wines" :key="index">
        <div class="wrap-wine-area">
          <img :src=wineItem.pic width="119">
          <p class="wine-en-name">{{wineItem.name}}</p>
          <p class="wine-ch-name">{{wineItem.goodsFee}}</p>
          <p class="wine-price" v-if="wineItem.goodsCurrentPrice">跨境拼单团购价：<span class="see-price" v-if="hasHeader">{{wineItem.goodsCurrentPrice}}</span><span v-else>登录可见</span></p>
          <p class="time" v-else>{{wineItem.addTime}}</p>
        </div>
      </div>
      <!--<div class="wine-list-item">
        <div class="wrap-wine-area">
          <img src="http://www.finewest.cn/resources/style/common/images/good.jpg" width="119">
          <p class="wine-en-name">Chateau Rabaud Promus 1999 Chateau</p>
          <p class="wine-ch-name">中文名称</p>
          <p class="time">2018.01.15</p>
        </div>
      </div>-->
    </div>
  </div>
</template>

<script>
  export default {
    name: 'f-wine',
    props: ['wines'],
    data () {
      return {
        hasHeader: false
      }
    },
    mounted () {
      if (this.$utils.getCookie('USER_NAME')) {
        this.hasHeader = true
      }
    }
  }
</script>
<style scope lang="scss">
  .wine-list-f{
    box-sizing: border-box;
    .wine-list-all{
      font-size: 0;
      .wine-list-item{
        width: 50%;
        display: inline-block;
        margin: 20px 0;
        text-align: center;
        &:nth-child(even){
          border-left: 1px solid #f5f5f5;
         position:relative;
          &::after{
            content: '';
            position: absolute;
            width: calc(100% - 12px);
            height: 1px;
            background: #f5f5f5;
            bottom: -20px;
             left: 0;
           }
         }
        &:nth-child(odd){
           border-right: 1px solid #f5f5f5;
           position:relative;
            &::after{
             content: '';
             position: absolute;
             width: calc(100% - 12px);
             height: 1px;
             background: #f5f5f5;
             bottom: -20px;
             right: 0;
           }
         }
        .wrap-wine-area{
          width: calc(100% - 48px);
          display: inline-block;
          p.wine-en-name{
            font-size: 10px;
            color: #000000;
            line-height: 1.2em;
            height: 2.4em;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-align: left;
          }
          p.wine-ch-name{
            font-size: 10px;
            line-height: 1.2em;
            color: #000000;
            text-align: left;
          }
          p.wine-price {
            margin-top: 10px;
            text-align: left;
            font-size: 10px;
            line-height: 1.2em;
            span{
              font-size: 10px;
              &.see-price{
               color: #e92d46;
             }
            }
          }
          p.time{
            font-size: 10px;
            line-height: 1.2em;
            color: #555555;
            margin-top: 10px;
            text-align: left;
          }
        }
      }
    }
  }
</style>
